<template>
  <div class="map-page">
    <van-nav-bar
      fixed
      title="地图找房"
      left-arrow
      @click-left="$router.back()"
    />
    <div style="height: 45px"></div>

    <baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler">
      <bm-navigation
        showZoomInfo
        type="BMAP_NAVIGATION_CONTROL_LARGE"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-navigation>
      <bm-scale anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-scale>
      <bm-label
        v-for="(item, index) in regiondata"
        :key="index"
        @click="enterRegion(item)"
        :position="{
          lng: `${item.coord.longitude}`,
          lat: `${item.coord.latitude}`,
        }"
        :content="`${item.label}\n${item.count}套`"
        :labelStyle="type >= 3 ? labelStyle2 : labelStyle"
        :offset="{ width: -35, height: 30 }"
      />
    </baidu-map>

    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '80%' }"
    >
      <div class="detail-title">
        <span>房屋详情</span>
        <div @click="$router.push('/find')">更多房源</div>
      </div>
      <div>
        <house-item
          v-for="(item, index) in housedetail"
          :key="index"
          :item="item"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getHouseMap, getHouseList } from "@/api/map";
import { getCityId } from "@/api/search";
import HouseItem from "@/components/House_Item.vue";
export default {
  name: "map-page",
  components: {
    HouseItem,
  },
  data() {
    return {
      center: { lng: 116.404, lat: 39.915 },
      zoom: 10,
      active: false,
      cityNow: "",
      cityid: "",
      areaid: "",
      regiondata: [],
      type: 1,
      housedetail: [],
      show: false,
      labelStyle: {
        width: "70px",
        height: "70px",
        "line-height": "70px",
        "text-align": "center",
        display: "inline-block",
        position: "absolute",
        "borde-radius": "100%",
        background: "rgba(12,181,106,.9)",
        color: "#fff",
        border: "2px solid hsla(0,0%,100%,.8)",
        " text-align": "center",
        cursor: "pointer",
        "border-radius": "50%",
      },
      labelStyle2: {
        height: "20px",
        "line-height": "19px",
        width: "100px",
        padding: "3px",
        "border-radius": "3px",
        position: "absolute",
        background: "rgba(12, 181, 106, 0.9)",
        cursor: "pointer",
        "white-space": "nowrap",
        color: "#fff",
        border: "none",
        display: "flex",
        "justify-content": "center",
      },
    };
  },
  async created() {
    this.cityNow = localStorage.getItem("cityNow");
    await this.CityId();
    await this.getMap();
  },
  methods: {
    handler({ BMap, map }) {
      // console.log(BMap, map)
    },
    async CityId() {
      const { body } = await getCityId(this.cityNow);
      this.cityid = body.value;
    },
    async getMap() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      const res = await getHouseMap(this.cityid);
      // console.log(res);
      this.regiondata = res.body;
    },
    async enterRegion(item) {
      // console.log(item);
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      // 点击次数++
      this.type++;
      // 点击超3次就跳详情
      if (this.type > 3) {
        const res = await getHouseList({ cityId: item.value });
        // console.log(res);
        this.housedetail = res.body.list;
        this.show = true;
      } else {
        // 点击不超三次就重复赋值接口数据，会自动跳转对应地区
        this.center.lng = item.coord.longitude;
        this.center.lat = item.coord.latitude;
        this.zoom += 3;
        this.cityid = item.value;
        this.regiondata = [];
        this.getMap();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.bm-view {
  width: 100vw;
  height: 93vh;
}
.detail-title {
  width: 100%;
  height: 40px;
  background-color: #c0c0c2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  span {
    font-weight: 700;
  }
}
</style>
